<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta name="description" content="对网页的一段概括性描述" />
		<meta name="keywords" content="关键字1,关键字2,关键字3..." />
		<meta name="renderer" content="webkit">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>活动</title>
		<!--公共样式-->
		<link rel="stylesheet" type="text/css" href="../css/active.css" />
		<link href="http://cdn.bootcss.com/normalize/5.0.0/normalize.css" rel="stylesheet">
		<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css" />
		<script src="../vendor/jquery.min.js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
		<script src="vendor/bootstrapt/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="http://dup.baidustatic.com/js/ds.js"></script>
		<!--[if lt IE 9]>
			<script src="http://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
			<script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
		<![endif]-->
	</head>

	<body>
		<!--登录注册-->
		<div class="Main" id="main">
			<div class="login" id="rigest">
				<span class="change" id="change2">
					切换
				</span>
				<span class="Close" id="close2">
					关闭
				</span>
				<h1>这是注册界面</h1>
			</div>
			<div class="login" id="login">
				<span class="change" id="change1">
					切换
				</span>
				<span class="Close" id="close1">
					关闭
				</span>
				<h1>这是登录界面</h1>
			</div>
		</div>

		<!--导航栏-->
		<header id="header">
			<div class="content">
				<div class="nav">
					<ul class="nav-menu">
						<li class="nav-toggle">
							<i class="fa" id="menu" style="left: 18px;">
								<span></span>
								<span></span>
								<span></span>
							</i>
						</li>
						<li class="signin-toggle">
							<a href="#" style="color: white;">
								<i class="glyphicon glyphicon-user"></i>
							</a>
						</li>
						<li class="home-logo">
							<a href="../index.html">
								<span class="text-replace">觉唯设计</span>
							</a>
						</li>
					</ul>
					<ul class="nav-list clearfix" id="navList">
						<li id="logo">
							<a href="../index.html"><span class="text-replace"></span></a>
						</li>
						<li>
							<a href="content/article.html" class="jw-nav-item" style="padding-right: 0;">文章</a>
						</li>
						<li>
							<a href="see.html" class="jw-nav-item">欣赏</a>
						</li>
						<li>
							<a href="matelrial.html" class="jw-nav-item">素材</a>
						</li>
						<li>
							<a href="active.html" class="jw-nav-item">兑换</a>
						</li>
						<li>
							<a href="#" class="jw-nav-item">活动</a>
						</li>
						<li>
							<a href="weiran.html" class="jw-nav-item">唯然</a>
						</li>
						<li>
							<a href="aboutjiawin.html" class="jw-nav-item">更多</a>
							<ul class="sub-menu">
								<li>
									<a href="aboutjiawin.html">关于觉唯</a>
								</li>
								<li>
									<a href="aboutjiawin1.html">留言联系</a>
								</li>
							</ul>
						</li>
						<li id="login-reg">
							<div>
								<a class="user-signin jw-nav-item" id="login1">登录</a>
							</div>
							<div>
								<a class="user-reg jw-nav-item" id="rigest1">注册</a>
							</div>
						</li>
						<li id="search" style="padding: 0 13px;">
							<form action="" method="post">
								<div class="search-input-wrapper">
									<span class="search-icon">
										<i class="fa glyphicon glyphicon-search"></i>
									</span>
								</div>
							</form>
						</li>
					</ul>
				</div>
			</div>
		</header>

		<!--container-->
		<div id="container">
			<div class="billboard sub-billboard shopping">
				<div class="wrapper">
					<div class="inner">
						<h1>活动 · 专题</h1>
						<p style="font-size: 12px;">Activities and topics</p>
					</div>
				</div>
			</div>
			<div class="content shop centralnav">
				<div id="guide" class="navcaret">
					<div class="group">
						<ul>
							<li class="cat-item current-cat">
								<a>全部</a>
							</li>
							<li class="cat-item cat-item-88">
								<a>赛事</a>
							</li>
						</ul>
					</div>
				</div>
				<div id="primary" class="special Tab-content">
					<div class="article">
						<ul>
							<li>
								<div class="item">
									<div class="thumb">
										<a href="#"><img src="../images/active1.jpg" /></a>
										<a href="#" class="read-more">
											<i class="glyphicon glyphicon-share-alt"></i>
										</a>
										<div class="activity "></div>
									</div>
									<div class="title">
										<h2>
											<a href="#">让H5再次唤醒你的设计天赋 – 2015 MAKA H5 创意模板大赛</a>
											<time class="time">              2015-08-10          </time>
										</h2>
									</div>
								</div>
							</li>
						</ul>
					</div>
				</div>
				<div id="primary" class="special">
					<div class="article">
						<ul>
							<li>
								<div class="item">
									<div class="thumb">
										<a href="#"><img src="../images/active1.jpg" /></a>
										<a href="#" class="read-more">
											<i class="glyphicon glyphicon-share-alt"></i>
										</a>
										<div class="activity "></div>
									</div>
									<div class="title">
										<h2>
												<a href="#">让H5再次唤醒你的设计天赋 – 2015 MAKA H5 创意模板大赛</a>
												<time class="time">              2015-08-10          </time>
											</h2>
									</div>
								</div>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
			<!--footer-->
			<footer id="footer">
				<div class="content">
					<nav class="inner">
						<aside id="describe" class="group">
							<h3>觉唯</h3>
							<p class="describe-text" style="margin-bottom: 2px;">以用户为中心的设计理念，专注于用户体验设计，拥有国内外最新的设计潮流趋势、独特而美的创意视觉、新颖而灵敏的思维意识、极致而生动的交互体验，更有严谨而通俗的技术教程！</p>
							<p>唯然是觉唯网的图片分享社区，以记录美丽、分享美好的创意理念，分享高品质创意、艺术、设计、时尚、插画、摄影、唯美类精美图片。</p>
						</aside>
						<aside class="group">
							<h3>关于</h3>
							<div class="menu-about-container">
								<ul id="menu-about" class="menu">
									<li>
										<a href="#">关于觉唯</a>
									</li>
									<li>
										<a href="#">留言联系</a>
									</li>
									<li>
										<a href="#">友情链接</a>
									</li>
									<li>
										<a href="#">免责声明</a>
									</li>
									<li>
										<a href="#">网站地图</a>
									</li>
								</ul>
							</div>
						</aside>
						<aside class="group">
							<h3>栏目</h3>
							<div class="menu-about-container">
								<ul id="menu-about" class="menu">
									<li>
										<a href="#">用户体验</a>
									</li>
									<li>
										<a href="#">素材下载</a>
									</li>
									<li>
										<a href="#">设计欣赏</a>
									</li>
									<li>
										<a href="#">主题商店</a>
									</li>
									<li>
										<a href="#">唯然灵感</a>
									</li>
								</ul>
							</div>
						</aside>
						<aside class="group">
							<h3>友链</h3>
							<div class="menu-about-container">
								<ul id="menu-about" class="menu">
									<li>
										<a href="#">前端观察</a>
									</li>
									<li>
										<a href="#">设计达人</a>
									</li>
									<li>
										<a href="#">MAKA</a>
									</li>
								</ul>
							</div>
						</aside>
						<aside id="social" class="group">
							<h3>关注</h3>
							<div>
								<ul id="menu-about" class="menu">
									<li>Email:
										<a href="#">javin@jiawin.com</a>
									</li>
									<li class="social-email">
										<form>
											<div class="social-email">
												<input class="email" type="email" name="to" id="to" placeholder="请输入您的邮箱" />
												<input class="submit" type="submit" value="订阅" />
											</div>
										</form>
									</li>
									<li class="social-icon">
										<a class="social-icon-item1" href="#"><i class="glyphicon glyphicon-glass"></i></a>
										<a class="social-icon-item1" href="#"><i class="glyphicon glyphicon-glass"></i></a>
										<a class="social-icon-item1" href="#"><i class="glyphicon glyphicon-glass"></i></a>
										<a class="social-icon-item1" href="#"><i class="glyphicon glyphicon-glass"></i></a>
										<a class="social-icon-item1" href="#"><i class="glyphicon glyphicon-glass"></i></a>
									</li>
								</ul>
							</div>
						</aside>
					</nav>
					<div class="site-info">
						<p class="copyright" style="font-size: 12px;font-family: '微软雅黑';">
							Copyright © 2012-2016
							<a href="#" style="color: #00C3B6;text-decoration: none;">觉唯设计</a>
							Theme by
							<a href="#" style="color: #00C3B6;text-decoration: none;">Javin zhong</a>
							All All Right Reserved. 粤ICP备12073831号-1
						</p>
					</div>
				</div>
			</footer>
			<div id="suspend" class="show1">
				<a><i class="glyphicon glyphicon-chevron-up "></i></a>
			</div>
			<script>
				//移动端导航栏
				var menu = document.getElementById("menu");
				var navList = document.getElementById("navList");
				var w = null;
				window.onresize = function() {
					w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
					if(w <= 1024) {
						navList.style.display = 'none';
						menu.onclick = function() {
							if(navList.style.display == 'none') {
								navList.style.display = 'block';
							} else {
								navList.style.display = 'none';
							}
						}
					} else {
						navList.style.display = 'block';
					}
				}

				//返回顶部
				var backtop = document.getElementById("suspend");
				var b = null;
				backtop.onclick = function() {
					var timer = setInterval(function() {
						window.scrollBy(0, -70);
						if(b == 0) {
							clearInterval(timer);
						}
					}, 15);
				}
				window.onscroll = function() {
					b = document.documentElement.scrollTop || window.pageYOffset;
					if(b <= 20) {
						backtop.style.bottom = '-60px';
					} else {
						backtop.style.bottom = '20px';
					}
					if(b >= 200) {
						document.getElementById("header").style.background = 'black';
					} else {
						document.getElementById("header").style.background = 'rgba(0, 0, 0, 0.5)';
					}
				}

				//登录注册部分
				var login1 = document.getElementById("login1");
				var rigest1 = document.getElementById("rigest1");
				var main = document.getElementById("main");
				var login = document.getElementById("login");
				var rigest = document.getElementById("rigest");
				var close1 = document.getElementById("close1");
				var close2 = document.getElementById("close2");
				var change1 = document.getElementById("change1");
				var change2 = document.getElementById("change2");
				login1.onclick = function() {
					main.style.display = 'block';
					login.style.zIndex = '9997';
					rigest.style.zIndex = '9996';
				}
				rigest1.onclick = function() {
					main.style.display = 'block';
					login.style.zIndex = '9996';
					rigest.style.zIndex = '9997';
				}
				close1.onclick = function() {
					main.style.display = 'none';
				}
				close2.onclick = function() {
					main.style.display = 'none';
				}
				change1.onclick = function() {
					login.style.zIndex = '9996';
					rigest.style.zIndex = '9997';
					login.style.transform = 'rotateY(360deg)';
					rigest.style.transform = 'rotateY(360deg)';
				}
				change2.onclick = function() {
					login.style.zIndex = '9997';
					rigest.style.zIndex = '9996';
					login.style.transform = 'rotateY(0deg)';
					rigest.style.transform = 'rotateY(0deg)';
				}

				//窗口切换
				$(function() {
					var timeoutId;
					var lis = $('.cat-item');
					var divs = $('.special');
					console.info(divs)
					lis.click(function() {
						lis.removeClass('current-cat');
						divs.removeClass('Tab-content');
						$(this).addClass('current-cat');
						divs.eq($(this).index()).addClass('Tab-content');
					});
				});
			</script>
	</body>

</html>
